<template>
  <div class="app-container">
    <!-- 搜索和操作栏 -->
    <el-row :gutter="20" class="mb10" style="margin-bottom: 10px;">
      <el-col :span="6">
        <el-input
          v-model="searchParams.proName"
          placeholder="产品名称"
          clearable
          @clear="handleSearch"
        />
      </el-col>
      <el-col :span="18" class="text-right">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="success" @click="handleAdd">新增产品</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table size="mini" :data="tableData" border v-loading="loading">
      <el-table-column type="index" />
      <el-table-column prop="proName" label="产品名称" width="150" />
      <el-table-column label="产品图片" width="150">
        <template slot-scope="scope">
          <div class="image-container">
            <el-image
              :src="BASE_URL+scope.row.imgUrl"
              fit="cover"
              class="thumb-image"
            >
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="销售状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.slaeFlag ? 'success' : 'danger'">
            {{ scope.row.slaeFlag ? "在售" : "停售" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="views" label="访问量" width="120" align="center" />
      <el-table-column prop="description" label="产品描述" />
      <el-table-column prop="updateTime" label="上架日期">
        <template slot-scope="scope">
          {{ scope.row.createTime|timeFilter }}
        </template>
      </el-table-column>
      // 修改模板中的删除按钮事件
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="handleEdit(scope.row)"
            plain
            size="small"
            >编辑</el-button
          >
          <el-button
            :type="scope.row.slaeFlag ? 'info' : 'success'"
            @click="handleToggleStatus(scope.row)"
            plain
            size="small"
          >
            {{ scope.row.slaeFlag ? "下架" : "上架" }}
          </el-button>
          <el-button
            type="danger"
            @click="handleDel(scope.row.id)"
            plain
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getProductList, setProductDown} from '@/api/index'
import {parseTime} from "@/utils/index";
import {BASE_URL} from '@/utils/request'

export default {
  name: "Product",
  data() {
    return {
      BASE_URL: BASE_URL,
      loading: false,
      searchParams: {
        proName: "",
        pageNum: 1,
        count: 999
      },
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  filters: {
    timeFilter(value) {
      return parseTime(value, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  methods: {
    // 获取产品数据
    async fetchData() {
      this.loading = true;
      getProductList(this.searchParams).then((res) => {
        this.tableData = res.list;
        this.pagination.total = res.total;
        this.loading = false;
      });
    },
    handleSearch() {
      this.pagination.current = 1;
      this.fetchData();
    },
    // 修改后的方法
    handleAdd() {
      this.$router.push("/products/add");
    },
    handleEdit(row) {
      this.$router.push({
        path: "/products/add",
        query: { id: row.id },
      });
    },
    // 新增删除确认方法
    handleDelete(id) {
      this.$confirm("确认删除该产品吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 这里调用实际删除接口
          // console.log("删除产品ID:", id);
          this.$message.success("删除成功！");
          this.fetchData(); // 删除后刷新数据
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    handleToggleStatus(row) {
      const action = row.slaeFlag ? "下架" : "上架";
      this.$confirm(`确认${action}该产品吗？`, "操作确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        setProductDown(row.id).then(res1 => {
            this.$message.success(`${action}成功！`);
            this.fetchData();
        })
      })
    },
    // Add these methods inside the methods object
    handleSizeChange(val) {
      this.pagination.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.pagination.current = val;
      this.fetchData();
    }
  } // This is the correct closing brace for the methods object
};
</script>

<style scoped>
.image-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 5px 0;
}

.thumb-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  position: relative;
}

.main-tag {
  position: absolute;
  bottom: 2px;
  right: 2px;
}
</style>
